<template>
  <div class="home-container">
    <div class="header">
      <div @click="() => (showarea = true)">
        <van-icon name="location" />
        <span>北京</span>
      </div>
      <div>
        <van-search
          v-model="keywords"
          placeholder="请输入搜索关键词"
          shape="round"
          @clear="clearWords"
        />
      </div>
      <div>
        <van-icon name="filter-o" />
      </div>
    </div>
    <div class="content">
      <div class="peopinfo" v-for="count in 3" :key="count">
        <div>
          <img :src="demoImgUrl" alt="" />
        </div>
        <div>
          <div class="info">
            <div class="nickname">
              <span>昵称: </span>
              <span>情到深处自然爱</span>
            </div>
            <div class="nickname">
              <span>城市: </span>
              <span>苏州</span>
            </div>
            <div class="nickname">
              <span>星座: </span>
              <span>处女座</span>
            </div>
            <div class="nickname">
              <span>爱好: </span>
              <span>打游戏，运动</span>
            </div>
          </div>
          <div class="like">
            <van-icon name="good-job-o" />
            <van-icon name="star-o" />
            <van-button color="#89b0bd" size="mini" @click="showDetail"
              >more</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 更多个人资料 -->
    <van-overlay :show="showinfo" @click="showinfo = false">
      <div class="wrapper">
        <div class="alert" @click.stop>
          <!-- 头像 -->
          <van-image
            width="64"
            height="64"
            round
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="infodetail">
            <ul>
              <li>年龄: <span>24</span></li>
              <li>身高: <span>167</span></li>
              <li>体重: <span>67kg</span></li>
              <li>星座: <span>处女座</span></li>
              <li>生日: <span>1995.08.20</span></li>
              <li>喜欢: <span>男</span></li>
              <li>婚否: <span>未婚</span></li>
              <li>性格: <span>傲骄</span></li>
              <li>爱好: <span>拍照</span></li>
              <li>血型: <span>O</span></li>
              <li>民族: <span>汉</span></li>
              <li>学历: <span>本科</span></li>
              <li>职业: <span>学生</span></li>
              <li>常玩的游戏及段位: <span>王者荣耀-王者</span></li>
            </ul>
            <van-button type="info" size="small" block>块级元素</van-button>
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 选择城市 -->
    <van-popup v-model="showarea" position="bottom" :style="{ height: '30%' }">
      <van-area
        title="选择城市"
        :area-list="areaList"
        :columns-num="2"
        @confirm="confirmArea"
        @cancel="cancelArea"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  name: "Home",
  data() {
    return {
      keywords: "",
      demoImgUrl: require("@/assets/images/demo.jpeg"),
      showinfo: false,
      showarea: false,
      areaList,
    };
  },
  created() {
    console.log("home");
  },
  methods: {
    // 清空搜索关键字
    clearWords() {
      this.keywords = "";
    },
    // 显示用户详细用户信息
    showDetail() {
      this.showinfo = true;
    },
    // 选择城市确认
    confirmArea(array) {
      console.log(array);
      this.cancelArea();
    },
    // 选择城市取消
    cancelArea() {
      this.showarea = !this.showarea;
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  padding: 56px 0;
  background: #ebedf0;
  .header {
    width: 100%;
    display: flex;
    align-items: center;
    height: 40px;
    background: #e5e5e5;
    position: fixed;
    top: 0;
    & > div:nth-child(1) {
      padding: 0 8px;
      span {
        font-size: 14px;
      }
    }
    & > div:nth-child(2) {
      width: calc(100% - 92px);
      .van-search {
        width: 100%;
        padding: 0 !important;
        background-color: transparent;
        .van-cell {
          padding: 3px 8px 3px 0;
        }
      }
    }
    & > div:nth-child(3) {
      padding: 0 8px;
    }
  }
  .content {
    width: calc(100% - 16px);
    margin: auto;
    min-height: 600px;
    .peopinfo {
      padding: 8px;
      margin: 0 8px 16px;
      border: 1px dashed;
      border-color: #ccc;
      background: #fff;
      border-radius: @border-radius-lg;
      & > div:nth-child(1) {
        width: 100%;
        aspect-ratio: 16/9;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      & > div:nth-child(2) {
        .info {
          width: 90%;
          margin: auto;
          padding: 8px;
          font-size: 14px;
          display: flex;
          flex-wrap: wrap;
          .nickname {
            width: 50%;
            display: flex;
            span:nth-child(1) {
              display: inline-block;
              width: 40px;
            }
            span:nth-child(2) {
              width: calc(100% - 40px);
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
        .like {
          width: 90%;
          margin: 0 auto 8px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  .van-overlay {
    z-index: 2;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .alert {
      width: 300px;
      padding: 30px 0;
      border-radius: @border-radius-md;
      background: #fff;
      .van-image {
        display: block;
        margin: 0 auto;
      }
      .infodetail {
        margin: auto;
        width: 80%;
        ul {
          margin: 20px auto;
        }
      }
    }
  }
}
</style>